<template>
  <div class="precautions">
    <img src="~@/assets/images/page/notice.png" alt="">
    <div>
      <h2 v-if="title">{{ title }}</h2>
      <div class="matter" v-if="matter.length > 0">
        <p v-for="(item,index) in matter" :key="index"
           :style="{'color':item.color,'font-weight':item.weight ?'bolder':'none'}"
        > {{ item.txt }}</p>
      </div>
    </div>
  </div>
</template>

<script>
// 注意事项 组件
export default {
  name: 'precautions',
  props: {
    title: {
      type: String,
      default: ''
    },
    matter: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {}
  },
  methods: {},
  created () {
  },
  mounted () {
  }
}
</script>

<style scoped lang="scss">
.precautions {
  display: flex;
  align-items: center;
  box-shadow: 1px 1px 4px 0px #1a3452;
  border-radius: 3px;
  margin-bottom: 10px;
  padding: 10px 0;

  img {
    width: 100px;
  }

  h2 {
    margin: 0;
  }

  h2 + .matter {
    margin-top: 10px;
  }

  .matter {
    p + p {
      margin-top: 10px;
    }
  }
}
</style>
